<!--
 * @Date: 2023-02-21 10:00:48
 * @LastEditTime: 2023-02-21 11:40:07
 * @FilePath: /hash-guess-game/src/components/rework/Tabs/Tabs.vue
 * 介绍:
-->
<script lang="ts" setup>
import globalEnum from "@@/hooks/globalEnum";
const props = withDefaults(
  defineProps<{
    active?: StrNumber;
    swipeable?: boolean;
    animated?: boolean;
    shrink?: boolean;
    type?: "card" | "line";
    color?: string;
    background?: string;
    duration?: StrNumber;
    lineWidth?: StrNumber;
    lineHeight?: StrNumber;
    border?: boolean;
    ellipsis?: boolean;
    sticky?: boolean;
    lazyRender?: boolean;
    offsetTop?: StrNumber;
    swipeThreshold?: StrNumber;
    titleActiveColor?: string;
    titleInactiveColor?: string;
    beforeChange?: (name: number | string) => boolean | Promise<boolean>;
    scrollspy?: boolean;
  }>(),
  {
    swipeable: true,
    animated: true,
    shrink: true,
    lazyRender: true,
    sticky: true,
    offsetTop: globalEnum.navH,
  }
);
const emit = defineEmits<{
  (e: "update:active", v: StrNumber): void;
  (
    e: "click-tab",
    v: {
      name: string | number;
      title: string;
      event: MouseEvent;
      disabled: boolean;
    }
  ): void;
  (e: "change", v: { name: string | number; title: string }): void;
  (e: "rendered", v: { name: string | number; title: string }): void;
  (e: "scroll", v: { scrollTop: number; isFixed: boolean }): void;
}>();
const $active = computed({
  get() {
    return props.active;
  },
  set(v) {
    emit("update:active", v!);
  },
});
</script>

<template>
  <VanTabs
  class="Tabs"
    v-bind="props"
    @click-tab="(e) => emit('click-tab', e)"
    @change="(e) => emit('change', e)"
    @rendered="(e) => emit('rendered', e)"
    @scroll="(e) => emit('scroll', e)"
    v-model:active="$active"
  >
    <slot></slot>
    <template #nav-left><slot name="nav-left"></slot> </template>
    <template #nav-right> <slot name="nav-right"></slot></template>
    <template #nav-bottom><slot name="nav-bottom"></slot> </template>
  </VanTabs>
</template>

<style lang="less" scoped></style>
